import { ExclamationCircleOutlined, SearchOutlined, PlaySquareTwoTone } from '@ant-design/icons'
import axios from '@/http'
import { InputRef, Modal, Space, Table, Input, message } from 'antd'
import { FC, useEffect, useState, useRef, useContext, createContext, MouseEventHandler } from 'react'
import PlayModal from './SeeVideo/PlayModal'
import { TVideo } from '@type'
import VideoModal from './videoModal/videoModal'
import { ColumnsType } from 'antd/lib/table'
import { bound, formatTime } from '@/util'
import Bread from '@/component/bread/bread'
import { AppContext } from '@/App'
import { TStore } from '@type'
export const VideoContext = createContext<TVideo>({
  id: 0,
  introduce: '',
  poster: '',
  prod: '',
  time: '',
  title: ''
})
const { confirm } = Modal
const Video = () => {
  const bread = ['视频', '视频管理']
  const [videoList, setVideoList] = useState<TVideo[]>([])
  const [allVideoList, setAllVideoList] = useState<TVideo[]>([])
  const TabImg: FC<{ poster: string; clickEvent: MouseEventHandler<HTMLElement> }> = ({ poster, clickEvent }) => {
    return (
      <div style={{ position: 'relative', textAlign: 'center', lineHeight: '80px' }}>
        <img src={poster} alt="海报" width={150} height={80} style={{ borderRadius: '5px', boxShadow: '0 0 10px 0 #888' }}></img>
        <i
          onClick={clickEvent}
          style={{
            opacity: '0.7',
            position: 'absolute',
            left: '0',
            top: '0',
            right: '0',
            bottom: '0',
            margin: 'auto',
            fontSize: '40px',
            textAlign: 'center'
          }}
        >
          <PlaySquareTwoTone></PlaySquareTwoTone>
        </i>
      </div>
    )
  }
  const columns: ColumnsType<TVideo> = [
    {
      title: 'Id',
      dataIndex: 'id',
      align: 'center',
      key: 'id'
    },
    {
      title: '标题',
      dataIndex: 'title',
      align: 'center',
      key: 'title'
    },
    {
      title: '时间',
      dataIndex: 'time',
      align: 'center',
      key: 'time',
      render: (_, { time }) => <span>{formatTime(time)}</span>
    },
    {
      title: '视频',
      dataIndex: 'poster',
      key: 'poster',
      align: 'center',
      width: 250,
      render: (_, data) => <TabImg poster={data.poster} clickEvent={() => SeeModal(data)}></TabImg>
    },
    {
      title: '简介',
      dataIndex: 'introduce',
      align: 'center',
      key: 'introduce'
    },
    {
      title: '操作',
      dataIndex: '',
      align: 'center',
      key: 'x',
      render: (_, data) => {
        const { id } = data
        return (
          <Space size="middle">
            <a onClick={() => showModal(data)}>编辑</a>
            <a onClick={() => showDeleteConfirm(id)} style={{ color: 'red' }}>
              删除
            </a>
          </Space>
        )
      }
    }
  ]
  const [videoInfo, setVideoInfo] = useState<TVideo>({ id: 0, introduce: '', poster: '', prod: '', time: '', title: '' })
  const showModal = (data: TVideo) => {
    setVideoInfo(data)
    videoModal.current?.showModal()
  }
  const SeeModal = (data: TVideo) => {
    setVideoInfo(data)
    playModal.current?.showModal()
  }
  const showDeleteConfirm = (id: number) => {
    confirm({
      title: '删除博客?',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除该博客？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        startDel(id)
      }
    })
  }
  const startDel = (id: number) => {
    axios
      .post('/prod/del', {
        id
      })
      .then(res => {
        if (res.data.error === -1) {
          message.success('删除成功')
          getVideoList()
        }
      })
  }
  const getVideoList = () => {
    axios.get('/prod/search').then(res => {
      if (res.data.error === -1) {
        setVideoList(res.data.data)
        setAllVideoList(res.data.data)
      }
    })
  }
  useEffect(() => {
    getVideoList()
  }, [])
  const inputDom = useRef<InputRef>(null)
  const onChange = () => {
    bound(() => {
      const title = inputDom.current?.input?.value
      const filterMessage = title ? allVideoList.filter(item => item.title.indexOf(title) !== -1) : allVideoList
      setVideoList(filterMessage)
    })
  }
  const videoModal = useRef<{ showModal: Function }>(null)
  const playModal = useRef<{ showModal: Function }>(null)
  return (
    <>
      <Bread bread={bread}></Bread>
      <Input
        onChange={onChange}
        ref={inputDom}
        style={{ width: '200px', float: 'right', marginBottom: '16px' }}
        placeholder="根据标题搜索"
        suffix={<SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />}
      />
      <Table scroll={{ y: 450 }} rowKey={record => record.id} dataSource={videoList} columns={columns} />
      <VideoContext.Provider value={videoInfo}>
        <VideoModal search={getVideoList} ref={videoModal}></VideoModal>
        <PlayModal ref={playModal}></PlayModal>
      </VideoContext.Provider>
    </>
  )
}
export default Video
